<template>
  <view>
    <view class="box-bg" v-bind:style="{'padding-top':allHeight+'rpx'}">
      <image v-if="imgBase" :src="`${imgBase}static/dota-bg.png`" mode="" class="tuku"></image>
      <uni-nav-bar left-icon="left" @clickLeft="goBack" color="#fff">
        <view class="input-view">
          <uni-icons class="input-uni-icon" type="search" size="18" color="#000" />
          <input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" v-model="searchName"
            @confirm="confirm" />
          <text v-if="searchName" class="icon_close" @click="closeFn">×</text>
        </view>
      </uni-nav-bar>
      <view class="dota-info" v-if="info">
        <view class="img-box">
          <image  v-bind:src="info.Class_imgPath" mode=""></image>
          <text>DOTA</text>
        </view>
        <!--  <view class="sc">
          进入地图
        </view> -->
        <view class="product-num">
          {{`${info.Class_GoodsCount[0].Desc}(${info.Class_GoodsCount[0].Count})`}}
        </view>
      </view>
      <view>
        <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
          <text class="scroll-view_H_item" v-for="(item,index) in info.Class_GoodsInfo" v-bind:key="index"
            v-bind:class="{'scroll-view_H_item_cur':cid == item.Class_id}" @click="changeCid(item.Class_id)">
            {{item.Class_name}}({{item.Goods_count}})
          </text>
        </scroll-view>
      </view>
      <view class="qf_filterBarWrapper" style="position: relative;">
        <view class="screen" v-show="modelFlag">
          <view class="row">
            <view class="row-name">
              力量：
            </view>
            <text @click="screenSearch(item)" v-for="(item,index) in liliang" v-bind:key="index">{{item}}</text>
          </view>
          <view class="row">
            <view class="row-name">
              敏捷：
            </view>
            <text @click="screenSearch(item)" v-for="(item,index) in minjie" v-bind:key="index">{{item}}</text>
          </view>
          <view class="row">
            <view class="row-name">
              智力：
            </view>
            <text @click="screenSearch(item)" v-for="(item,index) in zhili" v-bind:key="index">{{item}}</text>
          </view>
        </view>
        <view class="qf_filterBarWrapper-item"
          v-bind:class="{'qf_filterBarWrapper-item-current':sortName == 'weight' && tabType == '' }"
          @click="tabChange('weight')">
          综合
        </view>
        <view class="qf_filterBarWrapper-item" v-bind:class="{'qf_filterBarWrapper-item-current':sortName == 'sale'}"
          @click="tabChange('sale')">
          销量
        </view>
        <view class="qf_filterBarWrapper-item"
          v-bind:class="{'qf_filterBarWrapper-item-current':sortName == 'priceup' || sortName == 'pricedown'}"
          @click="tabChange('价格')">
          <text>价格</text>
          <uni-icons v-bind:type="typePrice" size="10">
          </uni-icons>
        </view>
        <view class="qf_filterBarWrapper-item" v-bind:class="{'qf_filterBarWrapper-item-current':sortName == 'uptime'}"
          @click="tabChange('uptime')">
          上架时间
        </view>
        <view class="qf_filterBarWrapper-item" v-if="cid == 69"
          v-bind:class="{'qf_filterBarWrapper-item-current':sortName == 'weight' && tabType == 'check'}"
          @click="tabChange('筛选')">
          筛选
          <uni-icons type="bottom" size="10">
          </uni-icons>
        </view>
      </view>
    </view>
    <view class="dota-main">
      <view class="dotaLts">
        <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :top="485">
          <!-- 加载列表 -->
          <view class="dotaLts-item" v-for="(item,index) in dataList" v-bind:key="index" @click="gotoDetail(item)">
            <text class="news-sm" v-if="(item.Goods_flag & 8) == 8"></text>
            <text class="hot-sm" v-if="(item.Goods_flag  & 16) == 16"></text>
            <text class="rec-sm" v-if="(item.Goods_flag & 512) == 512"></text>
            <image lazy-load  v-bind:src="item.Goods_imgPath" mode=""></image>
            <view class="product-info">
              <view class="product-name">
                {{item.Goods_disName}}
              </view>
              <!--  <view class="product-desc">
                <text>所属分类:</text><text>{{item.Class_name}}</text>
              </view> -->
              <view class="product-desc">
                {{item.Goods_profile.length>25 ? item.Goods_profile.substring(0,25)+'……':item.Goods_profile}}
              </view>
              <view class="product-tags" v-show="item.IsDiscount">
                限时折扣
              </view>
              <view class="product-price">
                <text><text class="product-price-type">￥</text>{{item.Goods_price}}<text
                    class="product-price-status">{{item.Unit}}</text>
                  <text v-show="item.IsDiscount"
                    style="text-decoration:line-through;font-size: 26rpx;font-weight: 500;color: #999999;margin-left:10rpx;">
                    ￥{{item.Goods_Original_price}}
                    <text style="font-size:20rpx;font-weight: 500;color: #999999;">{{item.Unit}}</text>
                  </text>
                </text>
                <text class="gm" @click.stop="buyNow(item)"></text>
              </view>
            </view>
          </view>
          <!-- 加载列表 -->
        </mescroll-uni>
      </view>
    </view>
   <view class="goods_nav_tips" :style="{ bottom: bottomOption + 'px' }" v-show="dataList.length<20">
      <text class="kefu_tx"></text> 
      <text class="wenzi">如订单支付或者物品发放有问题，请提交订单反馈</text>
      <text class="link-kefu" @tap="gotoMyOrderView">联系客服</text>
   </view>
  </view>
</template>

<script>
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  import checkLogin from '@/mixins/checkLogin.js'
  export default {
    mixins: [MescrollMixin, checkLogin],
    data() {
      return {
        titleBarHeight: 0,
        statusBarHeight: 0,
        allHeight: 0,
        info: '',
        cid: 3,
        flagId: 0,
        searchName: '',
        sortName: 'weight',
        pi: 1,
        ps: 10,
        dataList: [],
        total: 0,
        typePrice: 'bottom',
        tabType: '',
        modelFlag: false,
        zhili: ["神谕者", "寒冬飞龙", "工程师", "天怒法师", "双头龙", "魅惑魔女", "先知", "维萨吉", "修补匠", "暗影恶魔", "暗影萨满", "食人魔魔法师", "沉默术士",
          "祈求者", "陈", "光之守卫", "干扰者", "拉比克", "黑暗贤者", "殁境神蚀者", "拉席克", "蝙蝠骑士", "远古冰魄", "戴泽", "莉娜", "宙斯", "风行者", "风暴之灵",
          "帕克", "帕格纳", "水晶室女", "死亡先知", "痛苦女王", "·术士", "瘟疫法师", "谜团", "巫医", "莱恩", "巫妖", "祸乱之源"
        ],
        liliang: ["大地之灵", "孽主", "亚巴顿", "军团指挥官", "凤凰", "上古巨神", "钢背兽", "巨牙海民", "伐木机", "马格纳斯", "不朽尸王", "混沌骑士", "狼人", "裂魂人",
          "末日使者", "暗夜魔王", "噬魂鬼", "半人马战行者", "艾欧", "树精卫士", "酒仙", "炼金术师", "哈斯卡", "全能骑士", "发条技师", "龙骑士", "兽王", "昆卡",
          "冥魂大帝", "潮汐猎人", "斯拉达", "小小", "斯温", "撼地者", "沙王", "帕吉", "斧王", "玛尔斯"
        ],
        minjie: ["恐怖利刃", "天穹守望者", "灰烬之灵", "巨魔战将", "美杜莎", "赏金猎人", "复仇之魂", "熊战士", "圣堂刺客", "卓尔游侠", "矮人直升机", "力丸", "米拉娜",
          "幻影长矛手", "娜迦海妖", "变体精灵", "露娜", "德鲁伊", "主宰", "虚空假面", "斯拉克", "冥界亚龙", "剃刀", "米波", "剧毒术士", "幽鬼", "影魔", "幻影刺客",
          "编织者", "司夜刺客", "育母蜘蛛", "克林克兹", "嗜血狂魔", "狙击手", "敌法师", "齐天大圣"
        ],
        imgBase: 'https://img.5211game.com/Base/xiaochengxu/',
         bottomOption:0
      };
    },
    onLoad(options) {
      let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
      uni.getSystemInfo({ //获取系统信息
        success: res => {
          let navHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) *
            2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
          this.titleBarHeight = navHeight;
          this.statusBarHeight = res.statusBarHeight
          this.allHeight = this.titleBarHeight + this.statusBarHeight;
        },
        fail(err) {
          console.log(err);
        }
      })
      this._ClassInfoByCid();
      const { safeAreaInsets } = uni.getSystemInfoSync()
      this.bottomOption=safeAreaInsets?.bottom;
    },
    methods: {
      goBack() {
        uni.switchTab({
          url: `/pages/home/home`
        })
       
      },
      // 自定义此页面的转发给好友(已经有全局的分享方法，此处会覆盖全局)
      onShareAppMessage(res) {
        return {
          title: 'DOTA地图商店',
          path: `/subpkg/dota_view/dota_view`,
          imageUrl:'https://img.5211game.com/Base/xiaochengxu/static/dota-share.jpg'
        }
      },
      // 自定义页面的分享到朋友圈
      onShareTimeline(res) {
        return {
          title: 'DOTA地图商店',
          path: `/subpkg/dota_view/dota_view`,
          imageUrl:'https://img.5211game.com/Base/xiaochengxu/static/dota-share.jpg'
        }
      },
      closeFn() {
        this.searchName = ''
      },
      gotoMyOrderView() {
        uni.navigateTo({
          url: '/subpkg/my_order/my_order'
        })
      },
      //商品内容
      _ClassInfoByCid() {
        uni.$http.get(`/query/QueryWebClassInfoByCid?classid=${this.cid}`).then(({
          data: res
        }) => {
          console.log(res);
          if (res.data && res.data.Class_GoodsInfo) {
            this.info = res.data;
          } else {
            this.info = null;
          }
        })
      },
      //搜索列表
      _seachFlagPager() {
        uni.$http.get(
          `/query/QueryWebGoodsBySeachFlagPager?classid=${this.cid}&flag=${this.flagId}&search=${escape(this.searchName)}&sort=${this.sortName}&pi=${this.pi}&ps=${this.ps}`
        ).then(({
          data: res
        }) => {
          console.log(res);
          if (res.code == 0) {
            if (this.pi == 1) {
              this.dataList = [];
            }
            this.total = res.data.count;
            this.dataList = [...this.dataList, ...res.data.list];
            this.mescroll.endBySize(res.data.list.length, res.data.count);
            setTimeout(() => {
              this.mescroll.endSuccess(res.data.list.length);
            }, 20)

          } else {
            uni.$showMsg(res.msg)
          }
        })
      },
      confirm() {
        this._seachFlagPager();
      },
      tabChange(val) {
        if (val == 'weight') {
          this.sortName = 'weight';
          this.tabType = ''
          this.modelFlag = false;
          this.pi = 1;
          this._seachFlagPager();
          return
        } else if (val == 'sale') {
          this.sortName = 'sale';
          this.tabType = ''
          this.modelFlag = false;
          this.pi = 1;
          this._seachFlagPager();
          return
        } else if (val == '价格') {
          this.tabType = '';
          this.modelFlag = false;
          if (this.typePrice == 'bottom') {
            this.sortName = 'priceup';
            this.typePrice = 'top'
          } else if (this.typePrice == 'top') {
            this.sortName = 'pricedown';
            this.typePrice = 'bottom'
          }
          this.pi = 1;
          this._seachFlagPager();
          return
        } else if (val == 'uptime') {
          this.tabType = '';
          this.modelFlag = false;
          this.sortName = 'uptime';
          this.pi = 1;
          this._seachFlagPager();
          return
        } else if (val == '筛选') {
          this.sortName = 'weight';
          this.tabType = 'check';
          this.modelFlag = true;
        }

      },
      screenSearch(val) {
        this.pi = 1;
        this.searchName = val;
        this._seachFlagPager();
        this.modelFlag = false;
      },
      upCallback(page) {
        this.pi = page.num;
        this._seachFlagPager();
      },
      changeCid(cid) {
        this.cid = cid;
        this.pi = 1;
        this.searchName = '';
        this.modelFlag = false;
        this._seachFlagPager();
      },
      gotoDetail(item) {
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.Goods_id
        })
      }
    }
  }
</script>

<style lang="scss">
  $nav-height: 64rpx;
    .goods_nav_tips{
      padding-bottom: 20px;
      position: fixed;
      bottom: 0;
      left: 0;
      width:100%;
      height:50rpx;   
      z-index: 10;
       background-color:rgba(0, 0, 0, 0.5);
         font-size: 26rpx;
         color:#fff;
         display: flex;
         justify-content:flex-start;
         align-items: center;
         padding:10rpx;
       .kefu_tx{
         width:33rpx;
         height:34rpx;
         background: url(https://img.5211game.com/Base/xiaochengxu/static/kefu_tx.png);
         background-size: contain;
       }
       .wenzi{
         margin:0 10rpx;
       }
       .link-kefu{
         width:120rpx;
         height:46rpx;
         line-height:46rpx;
         text-align: center;
         background-color: #ff0000;
         font-size:24rpx;
         color:#fff;
         display: block;
         border-radius: 20rpx;
       }
    }
  .box-bg {
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 2;

    .tuku {
      width: 100%;
      height: 411rpx;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: -1;
      -weikit-filter: blur(100px);
      filter: blur(5px);
    }

    .tuku::after {
      content: "";
      display: block;
      background: rgba(0, 0, 0, 0.8);
      z-index: 1;
    }

    .scroll-view_H {
      white-space: nowrap;
      width: 100%;
      height: 60rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      margin-top: 30rpx;
      color: #FFFFFF;

      .scroll-view_H_item {
        padding: 10rpx 10rpx;
        height: 40rpx;
        line-height: 40rpx;
        margin: 0 20rpx;
      }

      .scroll-view_H_item_cur {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        position: relative;
        top: -6rpx;

        &::after {
          content: "";
          position: absolute;
          bottom: -6rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 90rpx;
          height: 6rpx;
          border-radius: 3px;
          background-color: #fff;
        }
      }
    }

    .dota-info {
      padding: 0 22rpx;
      height: 96rpx;
      color: #fff;
      display: flex;
      margin-top: 30rpx;
      justify-content: space-between;
      align-items: center;

      .img-box {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        image {
          width: 156rpx;
          height: 96rpx;
        }

        text {
          margin-left: 20rpx;
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #FEFEFE;
        }
      }

      .product-num {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
      }
    }

    .uni-navbar__header,
    .uni-navbar__content {
      background-color: transparent !important;
      border-bottom-width: 0px !important;
    }

    .uni-navbar__header-btns {
      width: 60rpx !important;
    }
  }

  .input-view {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    width: 326rpx;
    background: #F5F5F5;
    opacity: 0.5;
    color: #000;
    height: $nav-height;
    border-radius: 32rpx;
    padding: 0 32rpx;
    flex-wrap: nowrap;
    margin: 7px 0;
    line-height: $nav-height;
    position: relative;

    .icon_close {
      font-size: 26rpx;
      color: #333;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 20rpx;
      z-index: 1;
    }
  }

  .input-uni-icon {
    line-height: $nav-height;
  }

  .nav-bar-input {
    height: $nav-height;
    line-height: $nav-height;
    /* #ifdef APP-PLUS-NVUE */
    width: 370rpx;
    /* #endif */
    padding: 0 5px;
    font-size: 12px;
    background-color: #f8f8f8;
    color: #000;
  }

  .qf_filterBarWrapper {
    width: 100%;
    height: 86rpx;
    line-height: 86rpx;
    display: flex;
    margin-bottom: 20rpx;
    justify-content: space-around;
    background-color: #fff;

    .screen {
      padding: 0 20rpx;
      height: 400rpx;
      overflow-y: auto;
      overflow-x: hidden;
      border-radius: 0px 0px 12px 12px;
      position: absolute;
      background-color: #fff;
      top: 86rpx;

      .row {
        display: flex;
        justify-content: flex-start;
        flex-flow: wrap;

        .row-name {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #FFA000;
          margin-left: 10rpx;
        }

        text {
          padding: 4rpx 10rpx;
          text-align: center;
          background: #F2F2F2;
          border-radius: 26rpx;
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          margin-left: 10rpx;
          margin-bottom: 10rpx;

          &.current {
            background: #fff;
            border: 1rpx solid #FFA000;
            color: #FFA000;
          }
        }
      }

    }

    .qf_filterBarWrapper-item {
      flex: 1;
      text-align: center;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }

    .qf_filterBarWrapper-item-current {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFA000;
      font-weight: bold;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 70rpx;
        left: 50%;
        margin-left: -40rpx;
        width: 80rpx;
        height: 6rpx;
        background-color: #FFA000;
      }

      text {
        color: #FFA000 !important;
      }
    }
  }

  .dota-main {
    margin-top: 485rpx;

    .dotaLts {
      width: 100%;

      .dotaLts-item {
        height: 182rpx;
        padding: 20rpx;
        background: #FFFFFF;
        display: flex;
        margin-bottom: 10rpx;
        position: relative;

        .hot-sm {
          width: 104rpx;
          height: 42rpx;
          background: url(https://img.5211game.com/Base/xiaochengxu/static/hot-sm.png);
          position: absolute;
          top: 0rpx;
          right: 0rpx;
          background-size: contain;
          z-index: 2;
        }

        .rec-sm {
          width: 104rpx;
          height: 42rpx;
          background: url(https://img.5211game.com/Base/xiaochengxu/static/rec-sm.png);
          position: absolute;
          top: 0rpx;
          right: 0rpx;
          background-size: contain;
          z-index: 1;
        }

        .news-sm {
          width: 104rpx;
          height: 42rpx;
          background: url(https://img.5211game.com/Base/xiaochengxu/static/news-sm.png);
          position: absolute;
          top: 0rpx;
          right: 0rpx;
          background-size: contain;
          z-index: 3;
        }

        image {
          flex: 1;
          width: 184rpx;
          height: 182rpx;
          border-radius: 8rpx;
        }

        .product-info {
          flex: 2.8;
          padding-left: 20rpx;
          height: 182rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .product-name {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #1A1A1A;
            margin-top: 10rpx;
            margin-bottom: 10rpx;
          }

          .product-desc {
            font-size: 20rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            margin-bottom: 10rpx;
          }

          .product-tags {
            width: 88rpx;
            height: 28rpx;
            text-align: center;
            background: linear-gradient(90deg, #EE8924 0%, #EC632B 100%);
            border-radius: 4rpx;
            font-size: 20rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            margin-bottom: 10rpx;
          }

          .product-price {
            font-size: 36rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #E33F2A;
            display: flex;
            justify-content: space-between;
            padding-right: 20rpx;

            .gm {
              width: 102rpx;
              height: 44rpx;
              background: url(https://img.5211game.com/Base/xiaochengxu/static/gm.png);
              background-size: cover;
              display: block;
            }

            .product-price-type {
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #E33F2A;
            }

            .product-price-status {
              font-size: 20rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #E33F2A;
            }
          }
        }
      }
    }
  }
</style>
